<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>我的任务</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/supermarket.css" />
    <link rel="stylesheet" href="css/all.css" />
</head>
<body>
<style type="text/css">
	.middle-one{
		width: 100%;
	    position: absolute;
	    top: 0.1rem;
	    bottom: 0rem;
	    z-index: -1;
	    overflow-y: scroll;
	}
</style>
<div>
    <div class="head">
         <span href="javascript:;" onclick="go()">
        <i class="iconfont icon-iconfontjiantou1"></i></span>
        <h1 class="titles">我的任务</h1>
    </div>
    <div class="middle-one">
        <div onclick="location.href='./commodity-details.html'"><div class="commodity">
            <div class="commoditys">
                <img src="img/300377.png" alt="">
            </div>
            <div class="commo">
                <p class="commo-one">加拿大枫糖，枫叶国的餐桌美味。</p>
                <p class="commo-two">健脾补脾，益气活血，美容养颜。促进肠胃消化等功效 </p>
                <span>完成量：</span><i class="money">20</i><i class="moneys">总佣金：</i><i class="money">￥20</i>
            </div>
        </div>
        </div>
        <div onclick="location.href='./commodity-details.html'"><div class="commodity">
            <div class="commoditys">
                <img src="img/300377.png" alt="">
            </div>
            <div class="commo">
                <p class="commo-one">加拿大枫糖，枫叶国的餐桌美味。</p>
                <p class="commo-two">健脾补脾，益气活血，美容养颜。促进肠胃消化等功效 </p>
                <span>完成量：</span><i class="money">20</i><i class="moneys">总佣金：</i><i class="money">￥20</i>
            </div>
        </div></div>
        <div onclick="location.href='./commodity-details.html'"><div class="commodity">
            <div class="commoditys">
                <img src="img/300377.png" alt="">
            </div>
            <div class="commo">
                <p class="commo-one">加拿大枫糖，枫叶国的餐桌美味。</p>
                <p class="commo-two">健脾补脾，益气活血，美容养颜。促进肠胃消化等功效 </p>
                <span>完成量：</span><i class="money">20</i><i class="moneys">总佣金：</i><i class="money">￥20</i>
            </div>
        </div></div>
        <div onclick="location.href='./commodity-details.html'"><div class="commodity">
            <div class="commoditys">
                <img src="img/300377.png" alt="">
            </div>
            <div class="commo">
                <p class="commo-one">加拿大枫糖，枫叶国的餐桌美味。</p>
                <p class="commo-two">健脾补脾，益气活血，美容养颜。促进肠胃消化等功效 </p>
                <span>完成量：</span><i class="money">20</i><i class="moneys">总佣金：</i><i class="money">￥20</i>
            </div>
        </div></div>
        <div onclick="location.href='./commodity-details.html'"><div class="commodity">
            <div class="commoditys">
                <img src="img/300377.png" alt="">
            </div>
            <div class="commo">
                <p class="commo-one">加拿大枫糖，枫叶国的餐桌美味。</p>
                <p class="commo-two">健脾补脾，益气活血，美容养颜。促进肠胃消化等功效 </p>
                <span>完成量：</span><i class="money">20</i><i class="moneys">总佣金：</i><i class="money">￥20</i>
            </div>
        </div></div>
    </div>
</div>
<script src="js/jquery.js"></script>
<script src="js/x_rem.js"></script>
<script src="js/all.js"></script>
<script>
//	(function(){
//		var data={
//			"page":1,
//			"rows":3
//		};
//		
//		var success=(data)=>{
//			
//		};
//		
//		Hajax("post","/browseTask/findPageMyBrowseRecord",data,success);
//	})();
//	
	
	
				//上拉加载
			//_loadIndex 为请求的页数    _loadState为请求状态  0 可以请求  1 正在请求  2 请求结束
			var _loadIndex = 1,
				_loadState = 0;

			//上拉加载调用js
			loadmore('.middle-one', function(data) {
				$.each(data.data.list, function(key, val) {
					$('#wrapper ul').append();
				});
			}, function() {});

			function loadmore(element, successFn) {
				$(element).on("scroll", function() {
					//当前可视容器高度
					var _elementHeight = $(element).outerHeight(),
						//当前滚动区域高度
						_elementChildHeight = $(element).children().outerHeight(),
						//滚动条高度
						_elementScroll = $(element).scrollTop();
					//滚动区域 - 滚动条高度 > 可视高度  就是还可以滚动  表示没有滚动到底部  否则就到了底部
					if(_elementChildHeight - _elementScroll - 10 > _elementHeight) {
						//console.log('没到底')
					} else {
						//console.log('到底了')
						//当状态为0 的时候进行加载，防止重复加载
						if(_loadState == 0) {
							//状态更新为1
							_loadState = 1;
							//增加页数
							_loadIndex += 1;
							//添加正在加载loadding
							$(element).append('<p class="nowLoad">加载中...</p>');
							//请求当前页数ajax
//							ajaxLoad(_loadIndex);
						}
					}
				});

			};

			var html = "";

			function ajaxLoad(_loadIndex){
				console.log(GetQueryString("id"));

				var data = {
					page: _loadIndex,
					Rows: 6
				};

				var success = (data) => {
					
					for(let i=0;i<data.length;i++){
						html+=`
							<div onclick="location.href='./commodity-details.html?browseTaskId=${data[i].browseRecord.browseTaskId.browseTaskId}'"><div class="commodity">
					            <div class="commoditys">
					                <img src="img/300377.png" alt="">
					            </div>
					            <div class="commo">
					                <p class="commo-one">${data[i].browseRecord.browseTaskId.title}</p>
					                <p class="commo-two">${data[i].browseRecord.browseTaskId.briefIntroduction}${data[i].browseRecord.browseTaskId.browseTaskId}</p>
					                <span>完成量：</span>
					                <i class="money">${data[i].browseRecord.browseTaskId.oneMoney}</i>
					                <i class="moneys">总佣金：</i>
					                <i class="money">￥ ${data[i].browseRecord.browseTaskId.totalMoney}</i>
					            </div>
					        </div>
					        </div>
						`
					}
					
					$(".middle-one").html(html);
					 if(data ==""){
					 	 
					 }else{
					 	_loadState = 0;  //状态改为0
					 }
					
				}

				Hajax("post", "/browseTask/findPageMyBrowseRecord", data, success);
			};
			
			ajaxLoad(_loadIndex);
//	Hajax("post","/browseTask/findPageMyBrowseRecord",data,success);
 
	

</script>
 
</body>
</html>